<template>
  <div class="roleMain">
    <el-button type="primary" size="small" class="roleaddBtn" @click="dialogVisible = true">添加角色</el-button>
    <el-table :data="tableData" border>
      <el-table-column prop="fName" label="角色组">
      </el-table-column>
      <el-table-column prop="fCreateTime" label="创建时间">
        <template #default="scope">
          <span>{{dataFormate(scope.row.fCreateTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fState" label="状态" width="100">
        <template #default="scope">
          <div style="text-align:center">
            <el-button type="success" size="small" v-if="scope.row.fState === '0'">正常</el-button>
            <el-button type="danger" size="small" v-else>禁用</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <div v-if="scope.row.fType === '0'" style="text-align:center">
            <span>管理员角色</span>
          </div>
          <div v-else style="text-align:center">
            <el-button type="danger" size="small" @click="delRole(scope.row.fId)">删除</el-button>
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="success" size="small" @click="authOpen(scope.row.fId)">权限</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加角色" v-model="dialogVisible" width="30%">
      <RoleAdd @dialogVisibleVlaue="dialogVisibleVlaue" @addOk="addOk"></RoleAdd>
    </el-dialog>
    <el-dialog title="权限" v-model="authDialogVisible" width="30%">
      <AuthList @authDialogVisibleCtrol="authDialogVisibleCtrol" v-if="authDialogVisible" :authChecked="authChecked" :roleId="roleIdChecked"></AuthList>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Role, Auth } from '../../api/apiConfig'
import { DateFormat } from '../../utils/dateFormat'
import RoleAdd from './roleadd.vue'
import AuthList from './authList.vue'

type roleList = [
  {
    fId: string
    fName: string
    fCreateTime: string
    fState: string
  }
]

export default defineComponent({
  components: {
    RoleAdd,
    AuthList,
  },
  setup() {
    const tableData = ref<roleList>([
      {
        fId: '',
        fName: '',
        fCreateTime: '',
        fState: '',
      },
    ])

    let dialogVisible = ref<Boolean>(false)
    let authDialogVisible = ref<Boolean>(false)
    let authChecked = ref<any[]>([])
    let roleIdChecked = ref()
    const dataFormate = (date: Date | string) => {
      return DateFormat(date)
    }

    const getRoleList = () => {
      let params = {}
      Role.getRoleList(params).then((res: any) => {
        tableData.value = res.data
      })
    }

    const delRole = (fId) => {
      let params = {
        fId,
      }
      Role.delRole(params).then((res) => {
        if (res.statusCode === 200) {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
            onClose: () => {
              getRoleList()
            },
          })
        }
      })
    }

    const dialogVisibleVlaue = (data) => {
      dialogVisible.value = data
    }

    const addOk = () => {
      getRoleList()
    }

    onMounted(() => {
      getRoleList()
    })

    const authOpen = (roleId) => {
      authChecked.value = []
      authDialogVisible.value = true
      getAuthListByRoleId(roleId)
      roleIdChecked.value = roleId
    }

    const getAuthListByRoleId = (roleId) => {
      const params = {
        roleId,
      }
      Auth.getAuthListByRoleId(params).then((res) => {
        res.data.forEach((item) => {
          authChecked.value.push(item.authId)
        })
      })
    }

    const authDialogVisibleCtrol = (val) => {
      authDialogVisible.value = val
    }

    return {
      tableData,
      dataFormate,
      delRole,
      dialogVisible,
      dialogVisibleVlaue,
      addOk,
      authDialogVisible,
      authOpen,
      authDialogVisibleCtrol,
      authChecked,
      roleIdChecked,
    }
  },
})
</script>

<style scoped lang="scss">
.roleaddBtn {
  float: right;
  margin-bottom: 15px;
}
</style>